<template>
	<view  :style="{'--bar-top': iStatusBartop+'px', '--var-height': iStatusBarHeight+'px'}">
		<scroll-view scroll-y class="scroll__containt" :scroll-top="scrollTop" @scrolltolower="loadMore" >
			<!-- 社区教育 -->
			<view v-show="curIndex == 0">
				<education ref="education"></education>
			</view>
			<!-- 教育地图 -->
			<view v-show="curIndex == 1">
				<education-map ref="educationMap"></education-map>
			</view>
			<!-- 我的二维码 -->
			<!-- <view v-show="curIndex == 2">
				3
			</view> -->
			<!-- 我的课程 -->
			<view v-show="curIndex == 3">
				<my-class ref="myCourse"></my-class>
			</view> 
			<!-- 个人中心 -->
			<view v-if="curIndex == 4">
				<user-center ref="userCenter"></user-center>
			</view>
			<!-- <component :is="curComponent"></component> -->
		</scroll-view>
		
		<view class="tabBar" >
			<!-- 导航的中间圆圈 --> 
			<view class="tabBar_miden_border"></view>
			<view class="tabBar_list" >
				<view v-for="(item,index) in tab_nav_list" :key="item.id" :class="{'tabBar_item':item.id != 2,'tabBar_item2':item.id == 2}" @tap="changeTabHandle(item.id)">
					<view v-if="index == 2" class="qrcode__content">
						<u-qrcode :size="24" backgroundColor="transparent" foregroundColor="#FFFFFF"
						:text="signQrCode" />
					</view>
					<image class="tabBar_img" v-if="curIndex == item.id && index !== 2" :src="`../../../static/index/${item.urlNameSelect}.png`"></image>
					<image v-if="curIndex !== item.id && index !== 2" class="tabBar_img" :src="`../../../static/index/${item.urlName}.png`"></image>
					<view class="tabBar_name" :class="{'nav_active':curIndex == item.id}">{{item.name}}</view>
				</view>
			</view>
		</view>
		
		<!-- 认证成功弹窗 -->
		<uni-popup class="pop__success" ref="success" :maskClick="false"  type="center">
			<view class="community__sucess">
				<view class="popup__con">
					<image class="img__tip" src="@/static/image/community/sucess-approve.png" lazy-load></image>
					<button @tap="confirmHandle" class="confirm__btn" type="primary">确认</button>
				</view>
			</view>
		</uni-popup>
		<!-- 二维码弹窗 -->
		<qr-modal :visible="visible" @close="closeModal" :signQrCode="signQrCode"></qr-modal>
	</view>
</template>

<script>
	import education from '../index/index.vue'
	import educationMap from '../map/index.vue'
	import myClass from '../myClass/myClass.vue'
	import userCenter from '../user/index.vue'
	import { personalCenter } from '@/http/api.js'
	import { mapState, mapActions } from 'vuex'
	export default {
		components: {
			education,
			educationMap,
			myClass,
			userCenter
		},
		computed: {
			...mapState(['authStatus'])
		},
		watch:{
			authStatus: {
				handler(newVal){
					if(!this.confirmCount && newVal === 'AUTHENTICATION_SUCCESSFUL'){
						this.$refs.success.open();
					}
				}
			},
			unLogin: {
				handler(newVal){
					if(!newVal) return
					// #ifdef MP-WEIXIN
					this.getUserOpenId()
					.then(this.platformAuth)
					.then(this.getUserStatus)
					// #endif
					// #ifndef MP-WEIXIN
					this.platformAuth().then(this.getUserStatus).then(()=>{
						this.$refs.education.getData()
						this.getSignQrCode()
					})
					// #endif
				}
			}
		},
		data() {
			return {
				curIndex: 0,//控制显示那个组件
				tab_nav_list: [{
					id:0,
					name:'社区教育',
					urlName: 'community2x',
					urlNameSelect: 'community_current2x'
				},
				{
					id:1,
					name:'教育地图',
					urlName: 'map',
					urlNameSelect: 'map_current'
				},{
					id:2,
					name:'我的二维码',
				},{
					id:3,
					name:'我的课程',
					urlName: 'course2x',
					urlNameSelect: 'course_current2x'
				},{
					id:4,
					name:'个人中心',
					urlName: 'personalCenter2x',
					urlNameSelect: 'personalCenter_current2x'
				}],//菜单列表
				signQrCode: '',// 我的二维码
				visible: false, // 签到二维码弹窗
				scrollTop: 0,
				tapCount: 0,
				confirmCount: 0,//认证成功弹窗
				iStatusBartop:'',
				iStatusBarHeight:'',
				unLogin: false,
				mapLoad:false
			}
		},
		onLoad(e) {
			this.curIndex = e?.curIndex * 1 || 0
			let menuStyle = uni.getMenuButtonBoundingClientRect();
			this.iStatusBartop = menuStyle.top;
			this.iStatusBarHeight = menuStyle.height;
			this.unLogin = this.$cache.get('unLogin')
			this.$nextTick(() => {
				// 一定要等视图更新完再调用方法
				this.$refs.education.getData()
				if(!this.$cache.has('_token')) return
				this.getSignQrCode()
			})
		},
		onShow(){
			if (this.curIndex === 4) {
				this.$nextTick(() => {
					this.$refs.userCenter.getData() 
				})
			}
		},
		methods: {
			...mapActions(['getUserOpenId','platformAuth','getUserStatus']),
			// 确认认证成功
			confirmHandle(){
				this.confirmCount ++
				this.$refs.success.close()
			},
			// 切换组件
			changeTabHandle(type){
				console.log(type)
				const authStatus = this.$store.state.authStatus
				// if(type === 1){
				// 	uni.showToast({
				// 		title: '功能正在开发中~',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if(type){
					if(!authStatus){
						uni.navigateTo({
							url: '/pages/login/index/index'
						})
						return
					}
					switch(authStatus){
						case 'UNREGISTERED':
						// 未注册
							uni.navigateTo({
								url: '/pages/login/index/index'
							})
						break;
						case 'AUTHENTICATING':
						// 认证中 ->审核中页面
							uni.reLaunch({
								url: '/pages/community/approving/approving'
							})
						break;
						// break;
						case 'AUTHENTICATION_FAILED':
						// 认证失败 ->社区认证
							uni.navigateTo({
								url: `/pages/community/index/index?isFailed=true`
							})
						break;
						
						default:
							
						break;
					}
				}
				
				this.goTopHandle()
				if(authStatus !== 'AUTHENTICATION_SUCCESSFUL' && authStatus !== 'REGISTERED' && authStatus !== 'UNAUTHORIZED') return
				if(type !== 2){
					this.curIndex = type
				}
				switch(type){
					case 0:
						// 调用对应页面初始方法
						this.$refs.education.getData()
					break;
					case 1:
						if(!this.mapLoad){
							this.$refs.educationMap.getData()
							this.mapLoad = true
						}
					break;
					case 2:
						this.clickQRCode()
					break;
					case 3:
						if(this.tapCount) return
						this.tapCount ++ 
						this.$refs.myCourse.getDataList()
					break;
					case 4:
						// this.$refs.userCenter.getData()
					break;
					default:
					break
				}
			},
			// 获取二维码
			getSignQrCode(){
				this.$request({
					url: personalCenter
				}).then((res) => {
					this.signQrCode = res.signQrCode // 签到二维码
				})
			},
			// 点击二维码
			clickQRCode() {
				// 弹出弹窗
				this.visible = true
			},
			// 关闭弹窗
			closeModal() {
				this.visible = false
			},
			// 加载更多
			loadMore(){
				console.log('------loadMore------');
				// if(this.curIndex !== 3) return 
				if(this.curIndex==1){
					this.$refs.educationMap.loadMore()
				}else if(this.curIndex==3){
					this.$refs.myCourse.loadMore()
				}
			},
			// 回到顶部
			goTopHandle(){
				this.scrollTop = Math.random()
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.container_tab {
		
	}
	.scroll__containt {
		height: calc(100vh - 120rpx);
		box-sizing: border-box;
		// padding-top: var(--bar-top);
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.tabBar{ 
		width:100%;
		height: 120rpx;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;
		border-top:1px solid #E5E5E5;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;	
		
		.tabBar_list{ 
			position: relative;
			width: 100%;
			padding: 0 18rpx;
			display: flex;
			justify-content: space-between;
			.tabBar_img{ 
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 4rpx
			}
			
			.tabBar_item { 
				width: 114rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}
			.tabBar_item2{
				width: 140rpx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				margin-top: -24rpx;
				position: relative;
				z-index: 101;
				
				.qrcode__content {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 76rpx;
					height: 76rpx;
					border-radius: 50%;
					background-color: #FEA95F;
				}
				
				.tabBar_img { 
					width: 64rpx;
					height: 64rpx;
				}
			}
		 } 
	}
	.border_box{
		// pointer-events: none; 事件穿透解决z-index层级问题
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0px;
		bottom: 70rpx;
		z-index: 100;
		pointer-events: none;
		padding-bottom: 40rpx;
		
	}
	.tabBar_miden_border{
		position: absolute;
		top: -20rpx;
		width:100rpx;
		height:50rpx;
		border-top:2rpx solid #E5E5E5;
		border-radius:50rpx 50rpx 0 0; 
		background: #fff;
	}
	.tabBar_name{
		font-size: $uni-font-size-base;
		color: #888;
	}
	.nav_active{
		color: #333;
	}
	uni-button[disabled][type=primary] {
		background-color: #f99464;
	}
	
	uni-button {
		background-color: #FF6C25;
	}
	
	.button-hover[type=primary]{
		background-color: #f78d5a;
	}
	
	button[type=primary] {
		background-color: #FF6C25;
	}
	
	button[disabled][type=primary] {
		background-color: #f99464;
	}
	
	// 认证成功弹窗
	.pop__success {
		position: relative;
		z-index: 999;
	}
	.community__sucess {
		width: 640rpx;
		padding-top: 4rpx;
		box-sizing: border-box;
		background: 0 16rpx url(/static/image/community/popup-bg.png) no-repeat;
		background-size: 640rpx 840rpx;
		
		.popup__con {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-bottom: 50rpx;
			margin-top: 400rpx;
			border-radius: 16rpx;	
			background-color: $uni-bg-color;
			overflow: hidden;
			
			.head {
				display: flex;
				width: 100%;
				height: 134rpx;
				background: linear-gradient(360deg, #FFE9DE 0%, #EB8F63 100%);
			}
			
			.img__tip {
				width: 322rpx;
				height: 204rpx;
				margin-top: 102rpx;
				margin-bottom: 70rpx;
			}
			
			.confirm__btn {
				width: 480rpx;
				border-radius: 54rpx;
			}
		}
	}
</style>
